<template>
	<view class="c-radio" @click="radioChange">
		<view class="c-radio__icon" :class="checked ? 'icon-checked' : ''">
			<view class="c-radio__icon--box" v-show="checked"></view>
		</view>
		<view class="c-radio__right">
			<view class="c-radio__right--text">{{name}}</view>
			<view class="c-radio__right--input" v-if="name == '其他' && checked">
				<input type="text" v-model="value" @input="input">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				value: ""
			}
		},
		props: {
			name: {
			    type: [String, Number],
			    default: ""
			},
		},
		methods: {
			radioChange() {
				let children = this.$parent.$children;
				children.forEach(child => {
					child.checked = false;
				})
				this.checked = true;
				this.$parent.radioGroupChange(this);
				if (!this.checked) {
					this.$emit('change', this.name)
				}
			},
			input() {
				this.$parent.valueChange(this);
			}
		}
	}
</script>

<style scoped lang="scss">
	.c-radio {
		display: flex;
		padding: 20rpx 0;
		padding-left: 10rpx;
		
		&__icon {
			width: 25rpx;
			height: 25rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			border: 6rpx solid #f0f0f0;
			margin-top: 9rpx;
			transition: all 0.3s;
			
			&--box {
				width: 70%;
				height: 70%;
				background-color: #fff;
				border-radius: 50%;
			}
		}
		
		&__right {
			flex: 1;
			border-bottom: 1rpx solid #eee;
			margin-left: 20rpx;
			padding-bottom: 20rpx;
			margin-right: 25rpx;
			min-height: 45rpx;
			word-break: break-all;
			
			&--input {
				margin-top: 20rpx;
				width: 400rpx;
				
				input {
					width: 100%;
					height: 60rpx;
					border: 1rpx solid #eee;
					border-radius: 10rpx;
					padding: 0 20rpx;
				}
				
				input:hover {
					border: 1rpx solid #69b1ff;
				}
			}
		}
	}
	
	.icon-checked {
		background-color: #4096ff;
		border: 6rpx solid #4096ff;
	}
</style>
